<!DOCTYPE html>
<html lang="utf-8">
<head>
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- bootstrap-css -->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<!--// bootstrap-css -->
<!-- css -->
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
<!--// css -->
<link rel="stylesheet" href="css/owl.carousel.css" type="text/css" media="all">
<link href="css/owl.theme.css" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="css/cm-overlay.css" />
<!-- font-awesome icons -->
<link href="css/font-awesome.css" rel="stylesheet"> 
<!-- //font-awesome icons -->
<!-- font -->
<link href="http://fonts.googleapis.com/css?family=Roboto+Slab:100,300,400,700" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700italic,700,400italic,300italic,300' rel='stylesheet' type='text/css'>
<!-- //font -->
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.js"></script>
<!-- menu -->
<link rel="stylesheet" href="css/main.css">
<script type="text/javascript" src="js/main.js"></script>
<!-- //menu --> 
<script>
$(document).ready(function() { 
	$("#owl-demo").owlCarousel({
 
		autoPlay: 3000, //Set AutoPlay to 3 seconds
		autoPlay:true,
		items : 3,
		itemsDesktop : [640,5],
		itemsDesktopSmall : [414,4]
 
	});
	
}); 
</script>
</head>
<body>
	<!-- banner -->
	<div class="banner" id="home">
		<!-- menu -->
			<div id="toggle_m_nav">
			  <div id="m_nav_menu" class="m_nav">
				<div class="m_nav_ham" id="m_ham_1"></div>
				<div class="m_nav_ham" id="m_ham_2"></div>
				<div class="m_nav_ham" id="m_ham_3"></div>
			  </div>
			</div>

			<div id="m_nav_container" class="m_nav">
			  <ul id="m_nav_list" class="m_nav">
				<li class="m_nav_item" id="m_nav_item_1"> <a href="#home">首页</a> </li>
				<li class="m_nav_item" id="moble_nav_item_2"> <a href="#about">关于</a> </li>
				<li class="m_nav_item" id="moble_nav_item_3"> <a href="#statistics">评分</a> </li>
				<li class="m_nav_item" id="moble_nav_item_4"> <a href="#experience">经验</a> </li>
				<li class="m_nav_item" id="moble_nav_item_5"> <a href="#projects">项目</a> </li>
				<li class="m_nav_item" id="moble_nav_item_6"> <a href="#contact">联系</a> </li>
			  </ul>
			</div>
		<!-- menu -->
		<div class="container">
			<div class="agile-logo">
				<h1><a href="index.html">Resume<span>简历</span></a></h1>
			</div>
			<div class="w3l-banner-grids">
				<div class="col-md-8 w3ls-banner-right">
					<div class="banner-right-img">
						<img src="images/1.jpg" alt="" />
					</div>
					<div class="banner-right-info">
						<h2>科技的更新与进步是通过不断的探索与实践，只有通过不断实践，才能发现可更进的细节，从而发掘自己的知识体系和能力架构。</h2>
						<p>如今互联网技术突飞猛进，日益更新，web前端开发工作也越来越从互联网各个技术模块中被特定出来，如果说掌握HTML+CSS+JavaScript，了解后端知识，只是 60 分的合格前端；那么要想成为受追捧、拿高薪的 80 分优秀前端，要对业务需求和、架构设计有真正的运用；而 100 分的顶级前端，则必须要能够兼顾技术和设计，更接近「以前端开发为主的全栈工程师」了。现在，随着多设备、浏览器和 Web 标准的演变革命，前端正在成为兼顾逻辑、性能、交互、体验的综合性岗位</p>
					</div>
					<div class="clearfix"> </div>
					<div class="w3-button">
						<div class="w3-button-info m_nav_item">
							<a class="hvr-sweep-to-bottom" href="#contact">联系我</a>
						</div>
					</div>
					<div class="social-grids">
						<div class="social-info">
							<h4>如下: </h4>
						</div>
						<div class="agileinfo-social-grids">
							<ul>
								<li><a href="#"><i class="fa fa-facebook"></i></a></li>
								<li><a href="#"><i class="fa fa-twitter"></i></a></li>
								<li><a href="#"><i class="fa fa-rss"></i></a></li>
								<li><a href="#"><i class="fa fa-vk"></i></a></li>
							</ul>
						</div>
						<div class="clearfix"> </div>
					</div>
				</div>
				<div class="col-md-4 w3ls-banner-left">
					<div class="w3ls-banner-left-info">
						<h4>职位</h4>
						<p>Web前端开发工程师</p>
					</div>
					<div class="w3ls-banner-left-info">
						<h4>姓名</h4>
						<p>宁忠峰</p>
					</div>
					<div class="w3ls-banner-left-info">
						<h4>性别</h4>
						<p>男</p>
					</div>
					<div class="w3ls-banner-left-info">
						<h4>地址</h4>
						<p>北京市海淀区西北旺镇百旺青居5201</p>
					</div>
					<div class="w3ls-banner-left-info">
						<h4>电子邮件地址</h4>
						<p><a href="mailto:example@email.com">zhongfengning@163.com</a></p>
					</div>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
	<!-- //banner -->
	<!--<div class="tlinks">Collect from <a href="http://www.cssmoban.com/" >网页模板</a></div>-->
	<!-- about -->
	<div class="about" id="about">
		<div class="container">
			<div class="wthree-about-grids">
				<div class="col-md-6 wthree-about-left">
					<h3>关于我</h3>
					<h4>主攻web前端技术，具有PC、webApp、微信端开发经验，熟练使用jQuery和Vue.js进行网站建设。</h4>
					<p>
						<span>2018年在感之教育（北京）有限公司从事前端开发工作，主要负责网站前端和微信端搭建，网站维护，测试更新等各项工作。</span>
						<span>2017年毕业于潍坊科技学院-软件工程专业，工科学士学位。在北京八维研修学院从事web前端开发讲师，主攻程序设计、网页制作等工作。</span>
						
						<span>2016年在山东潍科软件科技有限公司开始实习主攻前端开发技术，主攻网页设计与制作、网站测试等工作。</span>
					</p>
				</div >
				<div class="col-md-6 wthree-about-right">
					<h3>技能</h3>
					<div class="skills-bar">
						<section class='bar'>
						  <section class='wrap'>
							<div class='wrap_right'>
							  <div class='bar_group'>

								<div class='bar_group__bar thin' label='HTML+CSS' show_values='true' tooltip='true' value='80'></div>
								<div class='bar_group__bar thin' label='JavaScript' show_values='true' tooltip='true' value='65'></div>
								<div class='bar_group__bar thin' label='jQuery' show_values='true' tooltip='true' value='70'></div>

								<div class='bar_group__bar thin' label='Vue.js' show_values='true' tooltip='true' value='60'></div>
							  </div>
							</div>
							<div class='clear'></div>
						  </section>
						</section>
					</div>
				</div >
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
	<!-- //about -->
	<!-- statistics -->
	<div class="jarallax statistics" id="statistics">
		<div class="container">
			<div class="w3-agileits-statistics-heading">
				<h3>职业评分</h3>
			</div>
			<div class="agile-statistics-grids">
				<div class="col-sm-4 agile-statistics-grid">
					<h4>80</h4>
					<i class="fa fa-desktop" aria-hidden="true"></i>
					<p>专业技术</p>
				</div>
				<div class="col-sm-4 agile-statistics-grid statistics-grid2">
					<h4>90</h4>
					<i class="fa fa-user" aria-hidden="true"></i>
					<p>学习能力</p>
				</div>
				<div class="col-sm-4 agile-statistics-grid">
					<h4>75</h4>
					<i class="fa fa-trophy" aria-hidden="true"></i>
					<p>项目经验</p>
				</div>
				<div class="clearfix"> </div>
			</div>
			<script src="js/jarallax.js"></script>
			<script src="js/SmoothScroll.min.js"></script>
			<script type="text/javascript">
				/* init Jarallax */
				$('.jarallax').jarallax({
					speed: 0.5,
					imgWidth: 1366,
					imgHeight: 768
				})
			</script>
		</div>
	</div>
	<!-- //statistics -->
	<!-- experience -->
	<div class="experience" id="experience">
		<div class="container">
			<div class="w3-agileits-statistics-heading experience-heading">
				<h3>工作经验</h3>
			</div>
			<div class="w3-agile-experience-grids">
				<div class="experience-top-grids">
					<div class="col-md-6 experience-grid">
						<div class="experience-grid-icon icon-left hvr-radial-out">
							<i class="fa fa-folder-open" aria-hidden="true"></i>
						</div>
						<div class="experience-grid-info">
							<h5>感之教育（北京）有限公司</h5>
							<p>负责网站搭建，数据交互，网站维护，课程迭代更新等工作。  </p>
						</div>
					</div>
					<div class="col-md-6 experience-grid experience-grid1">
						<div class="experience-grid-icon icon-left hvr-radial-out">
							<i class="fa fa-bell" aria-hidden="true"></i>
						</div>
						<div class="experience-grid-info">
							<h5>北京八维研修学院</h5>
							<p>程序设计及前端网页课程讲师。负责知识讲授，项目演练等教学工作。</p>
						</div>
					</div>
					<div class="clearfix"> </div>
				</div>
				<div class="experience-top-grids">
					<div class="col-md-6 experience-grid experience-grid2">
						<div class="experience-grid-icon icon-left hvr-radial-out">
							<i class="fa fa-comments" aria-hidden="true"></i>
						</div>
						<div class="experience-grid-info">
							<h5>北京前锋互联网培训</h5>
							<p>HTML5大前端实习，主攻各项web前端知识的前沿技术</p>
						</div>
					</div>
					<div class="col-md-6 experience-grid experience-grid3">
						<div class="experience-grid-icon icon-left hvr-radial-out">
							<i class="fa fa-asterisk" aria-hidden="true"></i>
						</div>
						<div class="experience-grid-info">
							<h5>潍科软件科技有限公司</h5>
							<p>公司软件工程实习，负责网页设计与制作等各项前端工作。</p>
						</div>
					</div>
					<div class="clearfix"> </div>
				</div>
			</div>
		</div>
	</div>
	<!-- //experience -->
	<!-- feedback -->
	<div class="jarallax feedback">
		<div class="container">
			<div class="w3-agileits-statistics-heading">
				<h3>职业人推荐</h3>
			</div>
			<div class="agileits-feedback-grids">
				<div id="owl-demo" class="owl-carousel owl-theme">
					<div class="item">
						<div class="feedback-info">
							<div class="feedback-top">
								<p> Sed semper leo metus, a lacinia eros semper at. Etiam sodales orci sit amet vehicula pellentesque. </p>
							</div>
							<div class="feedback-grids">
								<div class="feedback-img">
									<img src="images/f1.jpg" alt="" />
								</div>
								<div class="feedback-img-info">
									<h5>Peter Parker</h5>
									<p>Vestibulum</p>
								</div>
								<div class="clearfix"> </div>
							</div>
						</div>	
					</div>
					<div class="item">
						<div class="feedback-info">
							<div class="feedback-top">
								<p> Sed semper leo metus, a lacinia eros semper at. Etiam sodales orci sit amet vehicula pellentesque. </p>
							</div>
							<div class="feedback-grids">
								<div class="feedback-img">
									<img src="images/f2.jpg" alt="" />
								</div>
								<div class="feedback-img-info">
									<h5>Mary Jane</h5>
									<p>Vestibulum</p>
								</div>
								<div class="clearfix"> </div>
							</div>
						</div>	
					</div>
					<div class="item">
						<div class="feedback-info">
							<div class="feedback-top">
								<p> Sed semper leo metus, a lacinia eros semper at. Etiam sodales orci sit amet vehicula pellentesque. </p>
							</div>
							<div class="feedback-grids">
								<div class="feedback-img">
									<img src="images/f3.jpg" alt="" />
								</div>
								<div class="feedback-img-info">
									<h5>Steven Wilson</h5>
									<p>Vestibulum</p>
								</div>
								<div class="clearfix"> </div>
							</div>
						</div>	
					</div>
					<div class="item">
						<div class="feedback-info">
							<div class="feedback-top">
								<p> Sed semper leo metus, a lacinia eros semper at. Etiam sodales orci sit amet vehicula pellentesque. </p>
							</div>
							<div class="feedback-grids">
								<div class="feedback-img">
									<img src="images/f4.jpg" alt="" />
								</div>
								<div class="feedback-img-info">
									<h5>Peter Parker</h5>
									<p>Vestibulum</p>
								</div>
								<div class="clearfix"> </div>
							</div>
						</div>	
					</div>
				</div>
			</div>
			<script type="text/javascript">
				/* init Jarallax */
				$('.jarallax').jarallax({
					speed: 0.5,
					imgWidth: 1366,
					imgHeight: 768
				})
			</script>

		</div>
	</div>
	<!-- //feedback -->
	<!-- projects -->
	<div class="projects" id="projects">
		<div class="container">
			<div class="w3-agileits-statistics-heading experience-heading">
				<h3>我的项目</h3>
			</div>
		</div>
		<div class="bs-example bs-example-tabs" role="tabpanel" data-example-id="togglable-tabs">
					<ul id="myTab" class="nav nav-tabs" role="tablist">
						<li role="presentation" class="active"><a href="#home-main" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">全部</a></li>
						<li role="presentation"><a href="#learning" role="tab" id="learning-tab" data-toggle="tab" aria-controls="learning">webApp</a></li>
						<li role="presentation"><a href="#playing" role="tab" id="playing-tab" data-toggle="tab" aria-controls="playing">PC端</a></li>
						<li role="presentation"><a href="#painting" role="tab" id="painting-tab" data-toggle="tab" aria-controls="painting">微信端</a></li>
						<li role="presentation"><a href="#school" role="tab" id="school-tab" data-toggle="tab" aria-controls="school">其他</a></li>
					</ul>
					<div id="myTabContent" class="tab-content">
						<div role="tabpanel" class="tab-pane fade in active" id="home-main" aria-labelledby="home-tab">
							<div class="w3_tab_img">
								<div class="col-md-3 w3_tab_img_left">
									<div class="demo">
										<a class="cm-overlay" href="images/p1.jpg">
										  <figure class="imghvr-shutter-in-out-diag-2"><a href="https://www.hua.com/"><img src="images/p1.jpg" alt=" " class="img-responsive" /></a>
										  </figure>
										</a>
									</div>
								</div>
								<div class="col-md-3 w3_tab_img_left">
									<div class="demo">
										<a class="cm-overlay" href="images/p2.jpg">
										  <figure class="imghvr-shutter-in-out-diag-2"><a href="https://www.hua.com/product/9012060.html"><img src="images/p2.jpg" alt=" " class="img-responsive" /></a>
										  </figure>
										</a>
									</div>
								</div>
								<div class="col-md-3 w3_tab_img_left">
									<div class="demo">	
										<a class="cm-overlay" href="images/p3.jpg">
										  <figure class="imghvr-shutter-in-out-diag-2"><a href="china.ganzichinese.com"><img src="images/p3.jpg" alt=" " class="img-responsive" /></a>
											</figure>
										</a>
									</div>
								</div>
								<div class="col-md-3 w3_tab_img_left">
									<div class="demo">
										<a class="cm-overlay" href="images/p4.jpg">
										  <figure class="imghvr-shutter-in-out-diag-2"><a href="https://mp.weixin.qq.com/s/Brx6--nlqszMDy0uKu0ltA"><img src="images/p4.jpg" alt=" " class="img-responsive" /></a>
										</figure>
										</a>
									</div>
								</div>
								<div class="col-md-3 w3_tab_img_left">
									<div class="demo">
										<a class="cm-overlay" href="images/p5.jpg">
											<figure class="imghvr-shutter-in-out-diag-2"><a href="https://www.hua.com/Passport/Register/"><img src="images/p5.jpg" alt=" " class="img-responsive" /></a>
											</figure>
										</a>
									</div>
								</div>
								<div class="col-md-3 w3_tab_img_left">
									<div class="demo">
										<a class="cm-overlay" href="images/p6.jpg">
											<figure class="imghvr-shutter-in-out-diag-2"><a href="m.beibei.com"><img src="images/p6.jpg" alt=" " class="img-responsive" /></a>
											</figure>
										</a>
									</div>
								</div>
								<div class="col-md-3 w3_tab_img_left">
									<div class="demo">
										<a class="cm-overlay" href="images/p7.jpg">
											<figure class="imghvr-shutter-in-out-diag-2"><a href="http://www.ganzichinese.com/register.html"><img src="images/p7.jpg" alt=" " class="img-responsive" /></a>
											</figure>
										</a>
									</div>
								</div>
								<div class="col-md-3 w3_tab_img_left">
									<div class="demo">
										<a class="cm-overlay" href="images/p8.jpg">
											<figure class="imghvr-shutter-in-out-diag-2"><a href="https://m.jd.com/"><img src="images/p8.jpg" alt=" " class="img-responsive" /></a>
											</figure>
										</a>
									</div>
								</div>
								<div class="clearfix"> </div>
							</div>
						</div>
						<div role="tabpanel" class="tab-pane fade" id="learning" aria-labelledby="learning-tab">
							<div class="w3_tab_img">
								<div class="col-md-3 w3_tab_img_left">
									<div class="demo">
										<a class="cm-overlay" href="images/p6.jpg">
											<figure class="imghvr-shutter-in-out-diag-2"><img src="images/p6.jpg" alt=" " class="img-responsive">
											</figure>
										</a>
									</div>
								</div>
								<div class="col-md-3 w3_tab_img_left">
									<div class="demo">
										<a class="cm-overlay" href="images/p9.jpg">
											<figure class="imghvr-shutter-in-out-diag-2"><a href="http://m.mtime.com/"><img src="images/p9.jpg" alt=" " class="img-responsive"></a>
											</figure>
										</a>
									</div>
								</div>
								<div class="clearfix"> </div>
							</div>
						</div>
						<div role="tabpanel" class="tab-pane fade" id="playing" aria-labelledby="playing-tab">
							<div class="w3_tab_img">
								<div class="col-md-3 w3_tab_img_left">
									<div class="demo">
										<a class="cm-overlay" href="images/p1.jpg">
											<figure class="imghvr-shutter-in-out-diag-2"><img src="images/p1.jpg" alt=" " class="img-responsive">
											</figure>
										</a>
									</div>
								</div>
								<div class="col-md-3 w3_tab_img_left">
									<div class="demo">
										<a class="cm-overlay" href="images/p5.jpg">
											<figure class="imghvr-shutter-in-out-diag-2"><img src="images/p5.jpg" alt=" " class="img-responsive">
											</figure>
										</a>
									</div>
								</div>
								<div class="col-md-3 w3_tab_img_left">
									<div class="demo">
										<a class="cm-overlay" href="images/p7.jpg">
											<figure class="imghvr-shutter-in-out-diag-2"><img src="images/p7.jpg" alt=" " class="img-responsive">
											</figure>
										</a>
									</div>
								</div>
								<div class="col-md-3 w3_tab_img_left">
									<div class="demo">
										<a class="cm-overlay" href="images/p3.jpg">
											<figure class="imghvr-shutter-in-out-diag-2"><img src="images/p3.jpg" alt=" " class="img-responsive">
											</figure>
										</a>
									</div>
								</div>
								<div class="clearfix"> </div>
							</div>
						</div>
						<div role="tabpanel" class="tab-pane fade" id="painting" aria-labelledby="painting-tab">
							<div class="w3_tab_img">
								<div class="col-md-3 w3_tab_img_left">
									<div class="demo">
										<a class="cm-overlay" href="images/p2.jpg">
											<figure class="imghvr-shutter-in-out-diag-2"><img src="images/p2.jpg" alt=" " class="img-responsive">
											</figure>
										</a>
									</div>
								</div>
								<div class="col-md-3 w3_tab_img_left">
									<div class="demo">
										<a class="cm-overlay" href="images/p4.jpg">
											<figure class="imghvr-shutter-in-out-diag-2"><img src="images/p4.jpg" alt=" " class="img-responsive">
											</figure>
										</a>
									</div>
								</div>
								<div class="col-md-3 w3_tab_img_left">
									<div class="demo">
										<a class="cm-overlay" href="images/p10.jpg">
											<figure class="imghvr-shutter-in-out-diag-2"><a href="https://mp.weixin.qq.com/s/PYfGVwvwfMLJFofoKfDFxw"><img src="images/p10.jpg" alt=" " class="img-responsive"></a>
											</figure>
										</a>
									</div>
								</div>
								<div class="clearfix"> </div>
							</div>
						</div>
						<div role="tabpanel" class="tab-pane fade" id="school" aria-labelledby="school-tab">
							<div class="w3_tab_img">
								<div class="col-md-3 w3_tab_img_left">
									<div class="demo">
										<a class="cm-overlay" href="images/p8.jpg">
											<figure class="imghvr-shutter-in-out-diag-2"><img src="images/p8.jpg" alt=" " class="img-responsive">
											</figure>
										</a>
									</div>
								</div>
								<div class="clearfix"> </div>
							</div>
						</div>
					</div>
		</div>
		<script src="js/jquery.tools.min.js"></script>
			<script src="js/jquery.mobile.custom.min.js"></script>
			<script src="js/jquery.cm-overlay.js"></script>
			<script>
				$(document).ready(function(){
					$('.cm-overlay').cmOverlay();
				});
			</script>

	</div>
	<!-- //projects -->
	<!-- map -->
	<!--<div class="map-grid">
		<iframe src="" class="map" style="border:0" allowfullscreen=""></iframe>
	</div>-->
	<!-- //map -->
	<!-- contact -->
	<div class="contact" id="contact">
		<div class="container">
			<div class="w3-agileits-statistics-heading experience-heading">
				<h3>与我联系</h3>
			</div>
			<div class="contact-form">
				<form action="#" method="post">
					<div class="fields-grid">
						<div class="styled-input agile-styled-input-top">
							<input type="text" name="Full Name" required="">
							<label>全名</label>
							<span></span>
						</div>
						<div class="styled-input agile-styled-input-top">
							<input type="text" name="Phone" required=""> 
							<label>电话</label>
							<span></span>
						</div>
						<div class="styled-input">
							<input type="text" name="Email" required=""> 
							<label>Email</label>
							<span></span>
						</div> 
						<div class="styled-input">
							<input type="text" name="Subject" required="">
							<label>主题</label>
							<span></span>
						</div>
						<div class="clearfix"> </div>
					</div>
					<div class="styled-input textarea-grid">
						<textarea name="Message" required></textarea>
						<label>信息</label>
						<span></span>
					</div>	 
					<input type="submit" value="发送">
				</form>
			</div>
		</div>
	</div>
	<!-- //contact -->
	<!-- copyright -->
	<div class="agileits-w3layouts-footer">
		<div class="container">
			<p>版权所有 &copy; 2018.宁忠峰-github个人站长 Email:zhongfengning@163.com</p>
		</div>
	</div>
	<!-- //copyright -->
	<script src="js/bars.js"></script>
	<script src="js/owl.carousel.js"></script> 
</body>	
</html>

